<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title> 银河星系 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #content {
        width: 600px;
        height: 200px;
        position: relative;
        left: 0px;
        top: 0px;
    }

    #graph {
        position: absolute;
        left: 0;
        top: 0
    }

    #sun {
        position: absolute;
        width: 20px;
        height: 20px;
        line-height: 20px;
        left: 290px;
        top: 90px;
        background-color: blue
    }

    #planet {
        position: absolute;
        width: 5px;
        height: 5px;
        left: -100px;
        top: -100px;
        background-color: red
    }
    </style>
</head>

<body>
    <div id="content">
        <div id="graph"></div>
        <div id="sun"></div>
        <div id="planet"></div>
    </div>
    <input type="button" value="Run" id="run" />
    <input type="button" value="Stop" id="stop" />
    <script>
    function T$(i) { return document.getElementById(i); }
    var math = function() {
        var planet = T$('planet');
        xlen = T$('content').clientWidth,
            ylen = T$('content').clientHeight,
            x_posy = ylen / 2,
            y_posx = xlen / 2,
            angle = 0;

        var galaxy = function() {
            if (!(this instanceof galaxy)) 
                return new galaxy();
            
            this.timer = null;
                this.drawXaxis();
                this.drawYaxis();
                this.drawGalaxy();
        }

        galaxy.prototype = {
            drawXaxis() {
                for (var i = 0, arr = []; i < xlen; ++i) {
                    arr[i] = this.createDot(1, 1, i, x_posy, '#213478');
                }
                T$('graph').innerHTML += arr.join('');
            },

            drawYaxis() {
                var amp = this.amp;
                for (var i = 0, arr = []; i < ylen; ++i) 
                    arr[i] = this.createDot(1, 1, y_posx, i, '#213478');
                
                T$('graph').innerHTML += arr.join('');
            },

            drawGalaxy() {
                for (var i = 0, arr = []; i < xlen; ++i) {
                    arr[i] = this.createDot(1, 1, y_posx + Math.sin(angle += .01) * y_posx, x_posy + Math.cos(angle += .01) * x_posy, '#213478');
                }
                T$('graph').innerHTML += arr.join('');
            },

            runPlanet() {
                this.timer = setInterval(function() {
                    planet.style.left = (y_posx + Math.sin(angle += .01) * y_posx) + 'px';
                    planet.style.top = (x_posy + Math.cos(angle += .01) * x_posy) + 'px';
                }, 40);
            },

            createDot(w, h, x, y, c) {
                return '<div style="width:' + w + 'px;height:' + h + 'px;font-size:0;background-color:' + c + ';position:absolute;left:' + x + 'px;top:' + y + 'px;"><\/div>';
            }
        }

        return { galaxy: galaxy }
    }();

    var galaxy = math.galaxy();

    T$('run').onclick = function() {
        clearInterval(galaxy.timer);
        galaxy.runPlanet();
    }

    T$('stop').onclick = function() {
        clearInterval(galaxy.timer);
    }
    </script>
</body>

</html>